<template>
    <view class="content">
        <view class="header">
            <img class="logo" v-show="swiperIndex % 2 == 1 && swiperIndex != 0" src="../../static/logo.png"/>
            <img class="logo" v-show="swiperIndex % 2 == 0 && swiperIndex != 0" src="../../static/logo_blue.png"/>
<!--            <view>登录</view>-->
        </view>
        <!--   轮播广告     -->
        <swiper
            class="poster"
            circular
            :indicator-dots="false"
            :autoplay="false"
            :current="swiperIndex"
            :circular="false"
            :duration="500"
            :vertical="true"
            easing-function="easeInOutCubic"
            @change="swiperChange"
        >
            <swiper-item>
                <view class="poster_noe">
                    <img class="poster_logo" src="../../static/logo.png"/>
                    <view class="poster_title">精准招商信息工具</view>
                    <img class="poster_noe_bg" src="https://xunlantech.oss-cn-hangzhou.aliyuncs.com/source/static/poster/hit_icon.png" />
                    <img @click.stop="navLogin" class="poster_noe_login" src="https://xunlantech.oss-cn-hangzhou.aliyuncs.com/source/static/poster/login_btn.png"/>
                    <img @click.stop="navRegister" class="poster_noe_register" src="https://xunlantech.oss-cn-hangzhou.aliyuncs.com/source/static/poster/register_btn.png"/>
                </view>
            </swiper-item>
            <swiper-item>
                <view class="poster_two">
                    <img class="poster_bg" src="https://xunlantech.oss-cn-hangzhou.aliyuncs.com/source/static/poster/poster_two_bg.png"/>
                    <img src="https://xunlantech.oss-cn-hangzhou.aliyuncs.com/source/static/poster/poster_two_title.png" style="width: 580rpx; height: 70rpx" />
                    <img class="poster_two_content" src="https://xunlantech.oss-cn-hangzhou.aliyuncs.com/source/static/poster/poster_two_content.png" />
                    <img class="poster_two_figure" src="https://xunlantech.oss-cn-hangzhou.aliyuncs.com/source/static/poster/poster_two_figure.png" />
                </view>
            </swiper-item>
            <swiper-item>
                <view class="poster_three">
                    <img class="poster_bg" src="https://xunlantech.oss-cn-hangzhou.aliyuncs.com/source/static/poster/poster_three_bg.png"/>
                    <img src="https://xunlantech.oss-cn-hangzhou.aliyuncs.com/source/static/poster/poster_three_title.png" style="width: 600rpx; height: 64rpx" />
                    <view class="poster_three_block">
                        <img class="poster_three_view" src="https://xunlantech.oss-cn-hangzhou.aliyuncs.com/source/static/poster/poster_three_projectView.png" />
                        <img class="poster_three_text" src="https://xunlantech.oss-cn-hangzhou.aliyuncs.com/source/static/poster/poster_three_projectText.png"/>
                    </view>
                    <view class="poster_three_block">
                        <img class="poster_three_textto" src="https://xunlantech.oss-cn-hangzhou.aliyuncs.com/source/static/poster/poster_three_imText.png"/>
                        <img class="poster_three_view" src="https://xunlantech.oss-cn-hangzhou.aliyuncs.com/source/static/poster/poster_three_imView.png" />
                    </view>
                </view>
            </swiper-item>
            <swiper-item>
                <view class="poster_four">
                    <img class="poster_bg" src="https://xunlantech.oss-cn-hangzhou.aliyuncs.com/source/static/poster/poster_four_bg.png"/>
                    <img src="https://xunlantech.oss-cn-hangzhou.aliyuncs.com/source/static/poster/poster_four_title.png" style="width: 580rpx; height: 64rpx; margin-top: 100rpx" />
                    <view class="poster_four_content">
                        <view class="four_block" v-for="(item, index) in fourData" :key="index">{{ item }}</view>
                    </view>
                </view>
            </swiper-item>
            <swiper-item>
                <view class="poster_five">
                    <img class="poster_bg" src="https://xunlantech.oss-cn-hangzhou.aliyuncs.com/source/static/poster/poster_five_bg.png"/>
                    <img src="https://xunlantech.oss-cn-hangzhou.aliyuncs.com/source/static/poster/poster_five_title.png" style="width: 536rpx; height: 70rpx" />
                    <img class="poster_five_content" src="https://xunlantech.oss-cn-hangzhou.aliyuncs.com/source/static/poster/poster_five_content.png" />
                    <img class="poster_five_figure" src="https://xunlantech.oss-cn-hangzhou.aliyuncs.com/source/static/poster/poster_five_figure.png" />
                </view>
            </swiper-item>
            <swiper-item>
                <view class="poster_six">
                    <img class="poster_bg" src="https://xunlantech.oss-cn-hangzhou.aliyuncs.com/source/static/poster/poster_six_bg.png"/>
                    <img src="https://xunlantech.oss-cn-hangzhou.aliyuncs.com/source/static/poster/poster_six_title.png" style="width: 503rpx; height: 66rpx" />
                    <img class="poster_six_content" src="https://xunlantech.oss-cn-hangzhou.aliyuncs.com/source/static/poster/poster_six_content.png" />
                </view>
            </swiper-item>
        </swiper>
        <view class="footer">
            <img v-if="swiperIndex == 0 || swiperIndex == 6" class="slideUp_icon" src="https://xunlantech.oss-cn-hangzhou.aliyuncs.com/source/static/poster/slideUp_icon.png" />
            <view class="btn_block" v-else>
                <view class="btns" @click="navLogin">立即登录</view>
                <view class="btns" @click.stop="navRegister">申请开通</view>
            </view>
        </view>
        <uni-popup ref="qrCode" type="center">
            <view class="qr_block">
                <img class="qrcode" show-menu-by-longpress="true" src="https://xunlantech.oss-cn-hangzhou.aliyuncs.com/source/static/poster/serviceQrCode.png" />
                <view class="poster_over_text">码上申请开通</view>
                <view class="poster_over_shallowText">扫描添加客服开通</view>
            </view>
        </uni-popup>
    </view>
</template>

<script>
export default {
    data() {
        return {
            fourData: ['世界百强', '中国五百强', '独角兽', '上市公司', '专精特新', '行业龙头', '纳税大户', '地区百强', '准上市企业', '隐形冠军', '领军行业', '链主企业', '瞪羚企业', '高新技术企业', '总部企业', '......'],
            swiperIndex: 0,
        }
    },
    watch: {
    },
    onLoad() {
        // 判断用户是否已登录 已登录直接跳转首页
        const isLogin = uni.getStorageSync('isLogin')
        if (isLogin) {
            uni.reLaunch({
                url: '../project/project'
            })
        }
    },
    methods: {
        // 跳转登录
        navLogin() {
            uni.navigateTo({
                url: '../../subpages/pages/login/login'
            })
        },
        // 点击开通跳转首页弹出二维码
        navRegister() {
            this.$refs.qrCode.open()
        },
        // 轮播切换变更绑定属性
        swiperChange(e) {
            this.swiperIndex = e.detail.current
        }
    }
}
</script>

<style scoped lang="scss">
.content {
    min-width: 100vw;
    min-height: 100vh;
    .header {
        position: fixed;
        top: 0;
        z-index: 1;
        width: 100%;
        height: 184rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 80rpx 50rpx 0;
        box-sizing: border-box;
        .logo {
            width: 140rpx;
            height: 44rpx;
        }
    }
}
.poster {
    width: 100vw;
    height: 100vh;
}
/*
    底部
*/
.footer {
    width: 100%;
    height: 120rpx;
    position: fixed;
    bottom: 120rpx;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* 下滑图标动画 */
@keyframes slideAnimation {
    0% {
        opacity: 1;
    }

    50% {
        opacity: .5;
    }
    100% {
        opacity: 1;
    }
}
.slideUp_icon {
    width: 64rpx;
    height: 64rpx;
    animation: slideAnimation 1s infinite;
    -webkit-animation: slideAnimation 1s infinite;
}
.btn_block {
    width: 700rpx;
    height: 90rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .btns {
        width: 345rpx;
        height: 91rpx;
        background-image: linear-gradient(0, #5361fd, #8153f9) ;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 28rpx;
        border-radius: 46rpx;
        border: 2rpx solid #7481fd;
    }
}

/**
    二维码弹窗
 */
.qr_block {
    width: 412rpx;
    height: 472rpx;
    padding: 45rpx;
    box-sizing: border-box;
    background: white;
    border-radius: 13rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
    //margin-top: 250rpx;
    .qrcode {
        width: 280rpx;
        height: 280rpx;
    }
    .poster_over_text {
        width: 100%;
        height: 50rpx;
        font-size: 36rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #494949;
        line-height: 50rpx;
        letter-spacing: 3px;
        text-align: center;
    }
    .poster_over_shallowText {
        width: 100%;
        height: 33rpx;
        font-size: 24rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #9B9B9B;
        line-height: 33rpx;
        letter-spacing: 2px;
        text-align: center;
    }
}

/**
    广告一
 */
.poster_noe {
    width: 100%;
    height: 100vh;
    background: linear-gradient(180deg, #8f4df6, #5162fd);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    .poster_logo {
        width: 350rpx;
        height: 110rpx;
    }
    .poster_title {
        width: 100%;
        height: 80rpx;
        font-size: 40rpx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #FFFFFF;
        line-height: 80rpx;
        letter-spacing: 3px;
        text-align: center;
    }
    .poster_noe_bg {
        width: 100%;
        height: 550rpx;
        position: relative;
        top: -50rpx;
    }
    .poster_noe_login {
        height: 100rpx;
        width: 400rpx;
        position: relative;
        top: -50rpx;
    }
    .poster_noe_register {
        height: 100rpx;
        width: 400rpx;
    }
}
/**
    广告二
 */
.poster_two {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-direction: column;
    padding: 200rpx 0;
    box-sizing: border-box;
}
.poster_bg {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
}
.poster_two_content {
    width: 600rpx;
    height: 355rpx;
}
.poster_two_figure {
    width: 340rpx;
    height: 500rpx;
    margin-left: 340rpx;
}
/**
    广告三
 */
.poster_three {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-direction: column;
    padding: 200rpx 0;
    box-sizing: border-box;
}
.poster_three_block {
    width: 100%;
    height: 390rpx;
    display: flex;
    justify-content: space-around;
}
.poster_three_view {
    width: 190rpx;
    height: 390rpx;
}
.poster_three_text {
    width: 312rpx;
    height: 194rpx;
    margin-top: 20rpx;
}

.poster_three_textto {
    width: 315rpx;
    height: 224rpx;
    margin-top: 20rpx;
}
/**
    广告四
 */
.poster_four {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-direction: column;
    box-sizing: border-box;
}
.poster_four_content {
    width: 90%;
    position: relative;
    top: -150rpx;
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-wrap: wrap;
    .four_block {
        width: 250rpx;
        height: 80rpx;
        background: white;
        color: #5263fd;
        border-radius: 50rpx;
        line-height: 80rpx;
        text-align: center;
        font-size: 32rpx;
        margin: 20rpx;
    }
}
/**
    广告五
 */

.poster_five {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-direction: column;
    padding: 200rpx 0;
    box-sizing: border-box;
}
.poster_five_content {
    width: 522rpx;
    height: 264rpx;
}
.poster_five_figure {
    width: 384rpx;
    height: 377rpx;
}
/**
    广告六
 */
.poster_six {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-direction: column;
    padding: 200rpx 0;
    box-sizing: border-box;
}
.poster_six_content {
    width: 672rpx;
    height: 740rpx;
    position: relative;
    top: -80rpx;
}
</style>
